<template>
	<view>
		<view class="content padding bg-white radius">
			<view class="text-blue text-content text-xl">{{ teamDetailList.name }}</view>
			<!-- <view class="text-gray text-content text-df">
				<text class="cuIcon-notificationfill text-blue"></text>
				口号：能向上绝不向下
			</view> -->
			<view class=" margin-top-sm  text-sm">
				<view class="flex">
					<text class="cuIcon-friendfill text-blue" style="margin-right: 10rpx;"></text>
					<view v-if="teamDetailList" class="flex-sub">
						{{ teamDetailList.team_useridsCount }}/{{ teamDetailList.max_num }}
					</view>
				</view>
			</view>
			<!-- <view class="margin-top-sm flex justify-between">
				<view class="text-gray text-df">
					<text class="cuIcon-timefill text-blue" style="margin-right: 10rpx;"></text>
					2023年1月4日~1月12日
				</view>
			</view> -->
			<view class="text-df">
				团队简介：{{ teamDetailList.detail }}
			</view>
			<!-- <view class="cu-card dynamic ">
				<view class="cu-item shadow">
				</view>
				<view class="bg-white padding-sm radius margin-top-sm  text-sm shadow">
					<view class="flex">
						<view class="text-lg text-blue">
							<text class="cuIcon-friendfill text-blue"></text>
							组队说明：
						</view>
						<view class="flex-sub text-lg text-df">积极向上者欢迎加入，理科男生女生欢迎，文科也欢迎。入队加群，私聊队长入群！</view>
					</view>
				</view>
			</view> -->

			<view class="cu-card dynamic margin-top-sm light bg-gray padding" style="border-radius: 10rpx;">
				<view calss="text-xxl ">报名列表</view>
				<text v-if="teamDetailList && teamDetailList.team_userids_list"
					calss="text-lx text-grey">已经报{{ teamDetailList.team_userids_list.length }}人,还剩
					<text v-if="teamDetailList && teamDetailList.team_userids_list" class="text-lg text-bold">
						{{ teamDetailList.max_num - teamDetailList.team_userids_list.length }}</text>
					人</text>

				<view class="flex flex-wrap flex-direction ">
					<view class="text-lg text-blue margin-top-xs">
						<text class="cuIcon-peoplefill text-blue" style="margin-right: 10rpx;"></text>
						队长
					</view>
					<view class="flex margin-top-sm align-center" @tap="$openrul(`/pages/userInfo/userInfo?userid=${teamDetailList.captain.id}`)">
						<!-- <view calss="text-lg margin-xs">1</view> -->
						<view class="cu-avatar round margin-xs"
							:style="{ 'background-image': `url(${teamDetailList.captain.avatar})` }">
							<!-- <text>11</text> -->
						</view>
						<view class="text-lg  margin-xs">{{ teamDetailList.captain.nickname }}</view>
					</view>
				</view>
				<view class="flex flex-wrap flex-direction ">
					<view class="text-lg text-blue margin-top-xs">
						<text class="cuIcon-emojifill text-blue" style="margin-right: 10rpx;"></text>
						成员：
					</view>
					<view class="dsc" v-if="teamDetailList.team_userids_list.length === 0 " style="color: #ccc;">
						暂无团队成员
					</view>
					<view class="flex margin-top-sm align-center" v-for="member in teamDetailList.team_userids_list" @tap="$openrul(`/pages/userInfo/userInfo?userid=${member.id}`)"
						:key="member.id">
						<!-- <view calss="text-lg margin-xs">{{ item + 1 }}</view> -->
						<view class="cu-avatar round margin-xs" :style="{ 'background-image': `url(${member.avatar})` }">
							<!-- <text class="text-sm">港{{ item + 1 }}</text> -->
						</view>
						<view class="text-lg  margin-xs">{{ member.nickname }}</view>
					</view>
				</view>


			</view>
			<view class="file-title" v-if="teamDetailList.is_join == 1">
				所有文件：
			</view>
			<view class="dsc" v-if="allUploadList.length === 0 && teamDetailList.is_join == 1" style="color: #ccc;">
				暂无资料
			</view>
			<view class="file-container" v-if="teamDetailList.is_join == 1" style="border-radius: 10rpx;">
				<view class="file" v-for="item in allUploadList" :key="item.id">
					<view class="df" style="width:100%;">
						<text class="lg text-gray cuIcon-file" style="margin-right: 10rpx;"></text>
					<view class="noImg" @tap="downLoad(item.files)">{{ item.file_name }}</view>
					<view class="cu-item">
						<text class="lg text-gray cuIcon-down" style="color: blue;"></text>
					</view>
					<view class="personInfo" style="margin-right: 10rpx;">
						<view class="sm cu-avatar round margin-xs" :style="{ 'background-image': `url(${item.user.avatar})` }">
						</view>
						<view class="">
							{{ item.user.nickname }}
						</view>
					</view>
					</view>
					<view class="">
						上传时间：{{ item.createtime }}
					</view>
				</view>
			</view>
			<view class="file-title" v-if="teamDetailList.is_join == 1">
				我的文件：
			</view>
			<view class="dsc" v-if="myUploadList.length === 0 && teamDetailList.is_join == 1" style="color: #ccc;">
				暂无资料
			</view>
			<view class="file-container" v-if="teamDetailList.is_join == 1 " style="border-radius: 10rpx;">
				<view class="file" v-for="item in myUploadList" :key="item.id">
					<view class="file-top">
						<view class="file-top-left">
							<text class="lg text-gray cuIcon-file" style="margin-right: 10rpx;"></text>
							<view class="noImg" @tap.stop="downLoad(item.files)">{{ item.file_name }}</view>
							<view class="cu-item">
								<text class="lg text-gray cuIcon-down" style="color: blue;"></text>
							</view>
							<view class="personInfo">
								<view class="sm cu-avatar round margin-xs"
									:style="{ 'background-image': `url(${item.user.avatar})` }"></view>
								<view class="">
									{{ item.user.nickname }}
								</view>
							</view>
						</view>
						<view @tap.stop="deleteMyfile(item.id)">
							<text class="lg text-gray cuIcon-delete" style="margin-right: 10rpx;"></text>
						</view>
					</view>
					<view class="">
						上传时间：{{ item.createtime }}
					</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 90px;">
			<view class="uploadFile-contaienr">
				<button class="cu-btn bg-green margin-tb-sm lg" v-if="teamDetailList.is_join == 0" @tap.stop="joinTaskTeam(teamDetailList.id)">加入团队</button>
				<button class="cu-btn bg-green margin-tb-sm lg" v-if="teamDetailList.is_join == 1 || teamDetailList.is_captain == 1"
					@tap="$openrul(`/subpackage/competitionTeamDetailUpload/competitionTeamDetailUpload?id=${teamDetailList.id}`)">上传材料</button>
				<!-- <button class="cu-btn bg-red margin-tb-sm lg" v-if="teamDetailList.status == 2">已拒绝</button> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			domainPrefix2: '',
			myUploadList: [],
			allUploadList: [],
			myUploadForm: {
				team_id:'',
				user_id: '',
				limit: 1000,
				page: 1
			},
			allUploadForm: {
				team_id:'',
				user_id: '',
				limit: 1000,
				page: 1
			},
			userid: '',
			upUrl: '',
			teamDetailList: [],
			attachmentList: [],
			header: {
				'token': ''
			},
			uploadUrl: 'https://kehu.ruoyiweb.hellomky.cn/' + this.$myHttp.urlMap.uploadFiles,
			// uploadUrl: upUrl,
		}
	},
	onLoad(query) {
		let token = JSON.parse(uni.getStorageSync('vuexvuex'))
		var parsedData = JSON.parse(token.value);
		var tokenValue = parsedData.userinfo.token;
		this.myUploadForm.user_id = parsedData.userinfo.user_id;
		let domainPrefix = this.$myHttp.config.baseUrl;
		let domainPrefix2 = domainPrefix.replace(/\/$/, '');
		this.domainPrefix2 = domainPrefix2
		this.header['token'] = tokenValue;

		// 从 query 中获取传递的参数
		this.teamTaskDetailID = query.id || '';
		this.allUploadForm.team_id = this.teamTaskDetailID
		this.myUploadForm.team_id = this.teamTaskDetailID
		this.getTeamDetail()
		this.getTeamFileList()
		this.getAllTeamFileList()
	},
	onShow() {
		this.getTeamFileList()
		this.getAllTeamFileList()
	},
	methods: {
		async joinTaskTeam(team_id) {
			uni.showModal({
				title: '提示',
				content: '是否申请加入该队伍？',
				success: res => {
					if (res.confirm) {
						this.$myHttp.post({
							url: this.$myHttp.urlMap.joinTaskTeam,
							data: {
								team_id: team_id
							}
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									title: '已申请，待队长审核！',
									icon: 'none'
								})
							}
						})
		
		
		
					}
				}
			});
			// let res = await this.$myHttp.post({
			// 	url: this.$myHttp.urlMap.joinTaskTeam,
			// 	data: {
			// 		team_id: team_id
			// 	}
			// })
		
			// if (res.code == 1) {
			// 	uni.showToast({
			// 		title: '已申请加入队伍',
			// 		icon: 'none'
			// 	})
			// }
		},
		
		// 获取所有人上传附件列表
		async getAllTeamFileList() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.competitionTeamDetailFileList,
				data: this.allUploadForm
			})
			this.allUploadList = res.data.data

		},
		// 获取个人的附件列表
		async getTeamFileList() {
			let res = await this.$myHttp.post({

				url: this.$myHttp.urlMap.competitionTeamDetailFileList,
				data: this.myUploadForm
			})
			this.myUploadList = res.data.data

		},
		async getTeamDetail() {
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.competitionTeamDetail,
				data: {
					id: this.teamTaskDetailID
				}
			})
			this.teamDetailList = res.data.detail
			console.log('this.teamDetailList: ', this.teamDetailList)
		},
		downLoad(url) {
			url = this.domainPrefix2 + url
			uni.showModal({
				title: '确定要下载此附件吗',
				content: ' ',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '下载中,请稍后'
						});
						console.log(url);
						uni.downloadFile({
							url: url,
							success: res => {
								var tempFile = res.tempFilePath;
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: res => {
										var savedFilePath = res.savedFilePath;
										uni.hideLoading();
										uni.showToast({
											title: '保存成功，路径为' +
												savedFilePath
										});
										uni.openDocument({
											filePath: savedFilePath,
											success: function (res) {
												console.log(res);
											}
										});
									}
								});
							},
							fail: res => {
								console.log(res);
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon: 'none'
								});
							}
						});

						setTimeout(function () {
							uni.hideLoading();
						}, 20000);

						// downloadTask.onProgressUpdate((res) => {
						//     console.log('下载中,进度' +  res.progress)
						// });
					}
				}
			});
		},
		// 删除我的附件
		deleteMyfile(id) {
			console.log('%c [ id ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', id)

			uni.showModal({
				title: '确定要删除此附件吗',
				content: ' ',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '删除中,请稍后'
						});
						this.$myHttp.post({
							url: this.$myHttp.urlMap.deleteMyFile,
							data: {
								id: id
							}
						}).then(res => {
							uni.hideLoading();
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
							this.getTeamFileList()
							this.getAllTeamFileList()
						})
					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.file-top-left {
	display: flex;
	align-items: center;
}
.file-top {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}
.personInfo {
	display: flex;
	align-items: center;
}

.file-title {
	margin: 20rpx 0;
}

.file-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	background-color: #F4F4F4;
}

.file {
	// width: 200rpx;
	width: 100%;
	// border: 1px solid #ccc;
	// border-radius: 10upx;
	box-sizing: border-box;
	// margin-top: 20upx;
	display: flex;
	align-items: center;
	// justify-content: center;
	flex-wrap: wrap;
	padding: 10rpx;

	& .noImg {
		display: flex;
		justify-content: center;
		text-align: left;
		font-size: 26upx;
		// flex-wrap: wrap;
		color: blue;
		word-break: break-all;
		box-sizing: border-box;
	}
}

.uploadFile-contaienr {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: white;
	border-top: 1rpx solid #F4F4F4;
	padding: 30rpx;

	button {
		width: 100%;
	}

}
</style>